<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥ 212313">
            <template #echarts>
              <span class="zhouTongBi">周同比55.54%</span>
              <svg
                t="1674093794631"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5371"
                width="16"
                height="16"
              >
                <path
                  d="M79.123059 327.850933l405.024593 413.260162c15.690354 16.009625 41.469484 16.009625 57.160861 0l405.02357-413.260162c24.819269-25.323758 6.877641-68.028373-28.579919-68.028373L107.704001 259.82256C72.245418 259.82256 54.30379 302.527175 79.123059 327.850933z"
                  fill="#d81e06"
                  p-id="5372"
                ></path>
              </svg>
              <span class="zhouTongBi">日同比15.34%</span>
              <svg
                t="1674096861507"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6348"
                width="16"
                height="16"
              >
                <path
                  d="M325.456471 862.280661"
                  fill="#1afa29"
                  p-id="6349"
                ></path>
                <path
                  d="M882.057788 862.280661"
                  fill="#1afa29"
                  p-id="6350"
                ></path>
                <path
                  d="M236.028491 877.160382"
                  fill="#1afa29"
                  p-id="6351"
                ></path>
                <path
                  d="M960.132455 877.160382"
                  fill="#1afa29"
                  p-id="6352"
                ></path>
                <path
                  d="M63.683483 788.736998"
                  fill="#1afa29"
                  p-id="6353"
                ></path>
                <path
                  d="M958.469023 788.736998"
                  fill="#1afa29"
                  p-id="6354"
                ></path>
                <path
                  d="M64.77753 858.792098"
                  fill="#1afa29"
                  p-id="6355"
                ></path>
                <path
                  d="M861.417121 738.727375c41.604731 0 65.233383-54.963795 34.928639-85.258218L547.071415 304.191372c-20.029996-20.031716-49.822121-20.031716-69.853837 0L127.955275 653.469157c-31.085714 31.073673-5.136514 85.258218 35.441258 85.258218L861.417121 738.727375 861.417121 738.727375z"
                  fill="#1afa29"
                  p-id="6356"
                ></path>
                <path
                  d="M959.523505 858.792098"
                  fill="#1afa29"
                  p-id="6357"
                ></path>
              </svg>
            </template>
            <template #footer>
              <div>日销售额￥ &nbsp;121212</div>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template #echarts>
              <lineEcharts />
            </template>
            <template #footer> 日访问量1234 </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template #echarts>
              <barEcharts></barEcharts>
            </template>
            <template #footer> 转换率64% </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template #echarts>
                <ProgressEcharts></ProgressEcharts>
            </template>
            <template #footer>
              <div>
                <span class="zhouTongBi">周同比55.54%</span>
                <svg
                  t="1674093794631"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5371"
                  width="16"
                  height="16"
                >
                  <path
                    d="M79.123059 327.850933l405.024593 413.260162c15.690354 16.009625 41.469484 16.009625 57.160861 0l405.02357-413.260162c24.819269-25.323758 6.877641-68.028373-28.579919-68.028373L107.704001 259.82256C72.245418 259.82256 54.30379 302.527175 79.123059 327.850933z"
                    fill="#d81e06"
                    p-id="5372"
                  ></path>
                </svg>
                <span class="zhouTongBi">日同比15.34%</span>
                <svg
                  t="1674096861507"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6348"
                  width="16"
                  height="16"
                >
                  <path
                    d="M325.456471 862.280661"
                    fill="#1afa29"
                    p-id="6349"
                  ></path>
                  <path
                    d="M882.057788 862.280661"
                    fill="#1afa29"
                    p-id="6350"
                  ></path>
                  <path
                    d="M236.028491 877.160382"
                    fill="#1afa29"
                    p-id="6351"
                  ></path>
                  <path
                    d="M960.132455 877.160382"
                    fill="#1afa29"
                    p-id="6352"
                  ></path>
                  <path
                    d="M63.683483 788.736998"
                    fill="#1afa29"
                    p-id="6353"
                  ></path>
                  <path
                    d="M958.469023 788.736998"
                    fill="#1afa29"
                    p-id="6354"
                  ></path>
                  <path
                    d="M64.77753 858.792098"
                    fill="#1afa29"
                    p-id="6355"
                  ></path>
                  <path
                    d="M861.417121 738.727375c41.604731 0 65.233383-54.963795 34.928639-85.258218L547.071415 304.191372c-20.029996-20.031716-49.822121-20.031716-69.853837 0L127.955275 653.469157c-31.085714 31.073673-5.136514 85.258218 35.441258 85.258218L861.417121 738.727375 861.417121 738.727375z"
                    fill="#1afa29"
                    p-id="6356"
                  ></path>
                  <path
                    d="M959.523505 858.792098"
                    fill="#1afa29"
                    p-id="6357"
                  ></path>
                </svg>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import lineEcharts from "./lineEcharts";
import barEcharts from "./barEcharts";
import ProgressEcharts from './progressEharts'
export default {
  name: "Card",
  components: { Detail, lineEcharts, barEcharts,ProgressEcharts },
  methods: {},
};
</script>

<style scoped lang="scss">
.zhouTongBi {
  margin-right: 10px;
  margin-left: 5px;
}
</style>
